<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<body>

    <div id="mydiv">
       <!-- {{randomNum}}-->

        <h1 align="center">欢迎来到猜数字小游戏</h1>


        <el-button type="primary" @click="getRandomNum" v-html="btnTxt"></el-button> <el-tag v-html="randomTxt">标签一</el-tag>
        <br></br>
        <div>
            请输入1-100内数值：<el-input style="width: 100px" v-model="inputNun"  type="text"  placeholder="请输入数值"></el-input>
            <el-button type="primary" @click="confirmNum">确定</el-button>
        </div>


        <br>
        猜测结果：
        <el-tag :type="inputNum==randomNum?'success':'danger'" v-for="num in allNums" v-html="num==randomNum?'???':num"></el-tag>

    </div>

</body>
<script>
    var vue = new Vue({
        el:"#mydiv",
        data:{
            btnTxt:"生成随机数",
            stop:false,
            randomTxt:"???",

            inputNun:"", //记录输入的数字
            randomNum:"", //记录生成的随机数


            setInterval_Id:"",
            allNums:[] //记录录入的所有数字

        },
        created:function () {


        },
        methods:{
            getRandomNum:function () {
                if(!this.stop){
                    //开始
                    //清空之前的所有猜测记录
                    this.allNums.length=0;

                    this.stop=true;
                    this.btnTxt="停止";
                    this.setInterval_Id = setInterval(function () {
                        vue.randomNum=randomNum(1,100);
                        vue.randomTxt=vue.randomNum;
                    },100);


                }else{
                    //随机数丢到数组中
                    this.allNums.push(this.randomNum);

                    //停止
                    this.stop=false;
                    this.btnTxt="生成随机数";
                    clearInterval(this.setInterval_Id);
                    this.randomTxt="???";



                }
            },
            confirmNum:function () {

                if(this.inputNun==this.randomNum){

                    this.randomTxt=this.inputNun;

                    this.$message({
                        message: '恭喜你，猜对啦',
                        type: 'success'
                    });

                    return;
                }else{
                    this.$message.error('错了哦，请继续猜测');
                }

                //猜测的数字丢到数组中
                this.allNums.push(this.inputNun);
                //从小到大排序
                this.allNums.sort(function (a,b) {
                    return a-b;
                })
            }


        }


    });

    function randomNum(minNum,maxNum) {
        switch(arguments.length){
            case 1:
                return parseInt(Math.random()*minNum+1,10);
                break;
            case 2:
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
                break;
            default:
                return 0;
                break;
        }
    }
</script>
</html>